<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的世界MOD百科 - MOD管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#557A46',
                        secondary: '#B87333',
                        accent: '#E67E22',
                        dark: '#1E293B',
                        light: '#F8FAFC',
                    },
                    boxShadow: {
                        'minecraft': '0 4px 0 rgba(0, 0, 0, 0.25)',
                    },
                    backgroundImage: {
                        'minecraft-bg': "url('https://picsum.photos/id/137/1920/1080')",
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .btn-minecraft {
                @apply bg-primary hover:bg-primary/80 text-white font-bold py-2 px-4 rounded-none shadow-minecraft transition-all duration-150 transform hover:-translate-y-1 hover:shadow-lg;
            }
            .card-minecraft {
                @apply bg-dark/80 text-light rounded-none border-2 border-primary/30 shadow-minecraft hover:shadow-lg transition-all duration-300 hover:-translate-y-1;
            }
            .nav-link {
                @apply text-light hover:text-accent transition-colors duration-200 font-bold;
            }
        }
    </style>
</head>
<body class="bg-minecraft-bg bg-fixed bg-cover font-inter min-h-screen flex flex-col">
<!-- 导航栏 -->
<nav class="bg-dark/90 text-white shadow-lg sticky top-0 z-50 backdrop-blur-sm">
    <div class="container mx-auto px-4 py-3">
        <div class="flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-cubes text-accent text-2xl"></i>
                <h1 class="text-xl md:text-2xl font-bold tracking-wider">我的世界MOD百科 - 管理员模块</h1>
            </div>

            <div class="hidden md:flex items-center space-x-8">
                <a href="#" class="nav-link relative group">首页
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
                <a href="#" class="nav-link relative group">下载管理
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
                <a href="#" class="nav-link relative group">详细信息
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
                <a href="#" class="nav-link relative group text-accent">MOD管理
                    <span class="absolute w-full h-0.5 bg-accent bottom-0 left-0"></span>
                </a>
                <a href="#" class="nav-link relative group">评论管理
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
                <a href="#" class="nav-link relative group">审核管理
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
            </div>

            <div class="md:hidden">
                <button id="menu-toggle" class="text-white focus:outline-none">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>

        <div id="mobile-menu" class="hidden mt-4 pb-2 md:hidden">
            <a href="#" class="block py-2 nav-link">首页</a>
            <a href="#" class="block py-2 nav-link">下载管理</a>
            <a href="#" class="block py-2 nav-link">详细信息</a>
            <a href="#" class="block py-2 nav-link text-accent">MOD管理</a>
            <a href="#" class="block py-2 nav-link">评论管理</a>
            <a href="#" class="block py-2 nav-link">审核管理</a>
        </div>
    </div>
</nav>

<!-- 英雄区域 -->
<header class="relative h-[60vh] flex items-center justify-center overflow-hidden">
    <div class="absolute inset-0 bg-dark/50 backdrop-blur-sm z-10"></div>
    <div class="container mx-auto px-4 z-20 text-center">
        <h1 class="text-[clamp(2rem,4vw,3rem)] font-bold text-white mb-6 text-shadow">MOD管理</h1>
        <p class="text-[clamp(1rem,2vw,1.25rem)] text-light/90 max-w-2xl mx-auto">对所有MOD进行添加、编辑、删除等管理操作</p>
    </div>
</header>

<!-- 主要内容区域 -->
<main class="py-16 bg-dark/80 backdrop-blur-sm">
    <div class="container mx-auto px-4">
        <!-- 操作按钮区 -->
        <div class="flex justify-between items-center mb-10">
            <h2 class="text-2xl font-bold text-white">MOD列表</h2>
            <button class="btn-minecraft bg-accent hover:bg-accent/80">
                <i class="fa fa-plus mr-2"></i>添加新MOD
            </button>
        </div>

        <!-- MOD列表 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- MOD卡片1 -->
            <div class="card-minecraft overflow-hidden">
                <div class="relative h-48">
                    <img src="https://picsum.photos/id/237/600/400" alt="工业革命MOD" class="w-full h-full object-cover">
                    <div class="absolute top-3 right-3 bg-accent text-white text-xs font-bold px-2 py-1">已发布</div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-bold text-white mb-2">工业革命MOD</h3>
                    <p class="text-light/70 text-sm mb-4">科技类MOD，添加自动化生产线和电力系统</p>

                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">科技</span>
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">自动化</span>
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">1.19.2</span>
                    </div>

                    <div class="flex justify-between items-center">
                        <div class="text-light/80 text-sm">
                            <i class="fa fa-download mr-1"></i> 12,589次下载
                        </div>
                        <div class="flex gap-2">
                            <button class="btn-minecraft text-sm px-3 py-1">编辑</button>
                            <button class="btn-minecraft text-sm px-3 py-1 bg-red-600 hover:bg-red-700">删除</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- MOD卡片2 -->
            <div class="card-minecraft overflow-hidden">
                <div class="relative h-48">
                    <img src="https://picsum.photos/id/239/600/400" alt="神秘魔法MOD" class="w-full h-full object-cover">
                    <div class="absolute top-3 right-3 bg-accent text-white text-xs font-bold px-2 py-1">已发布</div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-bold text-white mb-2">神秘魔法MOD</h3>
                    <p class="text-light/70 text-sm mb-4">魔法类MOD，添加咒语、魔法物品和维度</p>

                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">魔法</span>
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">冒险</span>
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">1.18.2</span>
                    </div>

                    <div class="flex justify-between items-center">
                        <div class="text-light/80 text-sm">
                            <i class="fa fa-download mr-1"></i> 8,342次下载
                        </div>
                        <div class="flex gap-2">
                            <button class="btn-minecraft text-sm px-3 py-1">编辑</button>
                            <button class="btn-minecraft text-sm px-3 py-1 bg-red-600 hover:bg-red-700">删除</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- MOD卡片3 -->
            <div class="card-minecraft overflow-hidden">
                <div class="relative h-48">
                    <img src="https://picsum.photos/id/240/600/400" alt="建筑大师MOD" class="w-full h-full object-cover">
                    <div class="absolute top-3 right-3 bg-secondary text-white text-xs font-bold px-2 py-1">测试中</div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-bold text-white mb-2">建筑大师MOD</h3>
                    <p class="text-light/70 text-sm mb-4">建筑类MOD，添加多种建筑材料和工具</p>

                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">建筑</span>
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">装饰</span>
                        <span class="bg-primary/30 text-light/90 text-xs px-2 py-1 rounded">1.20.1</span>
                    </div>

                    <div class="flex justify-between items-center">
                        <div class="text-light/80 text-sm">
                            <i class="fa fa-download mr-1"></i> 1,245次下载
                        </div>
                        <div class="flex gap-2">
                            <button class="btn-minecraft text-sm px-3 py-1">编辑</button>
                            <button class="btn-minecraft text-sm px-3 py-1 bg-red-600 hover:bg-red-700">删除</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <div class="mt-10 text-center">
            <div class="inline-flex">
                <button class="btn-minecraft mx-1 px-3 py-1">1</button>
                <button class="btn-minecraft mx-1 px-3 py-1">2</button>
                <button class="btn-minecraft mx-1 px-3 py-1">3</button>
                <span class="text-light mx-2 my-auto">...</span>
                <button class="btn-minecraft mx-1 px-3 py-1">10</button>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark/90 text-white py-8">
    <div class="container mx-auto px-4 text-center">
        <p>&copy; 2024 我的世界MOD百科 - 管理员模块. 保留所有权利.</p>
    </div>
</footer>

<script>
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    menuToggle.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });
</script>
</body>
</html>